<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">银行卡号</text>
        <input 
          v-model="bankCard.number" 
          type="number" 
          placeholder="请输入银行卡号"
          maxlength="19"
          @input="formatCardNumber"
        />
      </view>
      
      <view class="form-item">
        <text class="label">银行名称</text>
        <picker 
          mode="selector" 
          :range="bankList" 
          range-key="name"
          @change="selectBank"
        >
          <view class="picker">
            {{bankCard.name || '请选择银行'}}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">持卡人姓名</text>
        <input 
          v-model="bankCard.holder" 
          placeholder="请输入持卡人姓名"
          maxlength="20"
        />
      </view>
      
      <button class="submit-btn" @click="submit">确认添加</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bankCard: {
        number: '',
        name: '',
        holder: '',
        id: Date.now()
      },
      bankList: [
        {name: '工商银行', id: 'icbc'},
        {name: '建设银行', id: 'ccb'},
        {name: '中国银行', id: 'boc'},
        {name: '农业银行', id: 'abc'},
        {name: '招商银行', id: 'cmb'}
      ]
    }
  },
  methods: {
    formatCardNumber(e) {
      // 格式化银行卡号显示
      this.bankCard.number = e.detail.value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
    },
    selectBank(e) {
      const index = e.detail.value;
      this.bankCard.name = this.bankList[index].name;
    },
    validate() {
      if (!this.bankCard.number || this.bankCard.number.replace(/\s/g, '').length < 16) {
        uni.showToast({title: '请输入正确的银行卡号', icon: 'none'});
        return false;
      }
      if (!this.bankCard.name) {
        uni.showToast({title: '请选择银行', icon: 'none'});
        return false;
      }
      if (!this.bankCard.holder) {
        uni.showToast({title: '请输入持卡人姓名', icon: 'none'});
        return false;
      }
      return true;
    },
    submit() {
      if (!this.validate()) return;
      
      // 模拟提交
      uni.showLoading({title: '提交中...'});
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({title: '添加成功'});
        
        // 返回并更新列表
        const pages = getCurrentPages();
        const prevPage = pages[pages.length - 2];
        if (prevPage.route === 'pages/bank/list') {
          prevPage.$vm.bankCards.push({
            ...this.bankCard,
            icon: `/static/bank/${this.bankList.find(b => b.name === this.bankCard.name).id}.png`
          });
        }
        
        uni.navigateBack();
      }, 1500);
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 30rpx;
}

.form {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .form-item {
    margin-bottom: 40rpx;
    
    .label {
      display: block;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    input, .picker {
      height: 80rpx;
      line-height: 80rpx;
      border-bottom: 1rpx solid #eee;
      font-size: 32rpx;
      color: #333;
    }
    
    .picker {
      color: #999;
    }
  }
  
  .submit-btn {
    margin-top: 60rpx;
    background: #007AFF;
    color: #fff;
    border-radius: 48rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
  }
}
</style>